import React from 'react'
import '../assets/css/card.scss'
import PropTypes from 'prop-types'
/**
 * 函数组件如果要获取外部组件的传递的数据，需要使用props来完成
 * 而这个props是通过函数的参数传递进来的
 * 函数组件中props默认值
 * 函数名.defaultProps={
 *    props的属性名:xx
 * }
 */
export default function CardComponent(props) {
  return (
    <div className='box'>
        <div className='box-header'>
            <img src={props.cover} alt={props.title} className="conver"/>
        </div>
        <div className='box-content'>
            <div>{props.title}</div>
            <div>{props.teacher}</div>
            <div>浏览人数:{props.browserNum}</div>
        </div>
    </div>
  )
}
//props的默认值
CardComponent.defaultProps={
    cover:'http://old.woniuxy.com/page/img/bg/module8-bg-1s.jpg',
    browserNum:0,
    title:'暂无名称',
    teacher:'待定'
}
/**
 * Props的验证器
 */
CardComponent.propTypes={
    browserNum:PropTypes.number.isRequired
}


